import { FC, useState } from "react"
import Taro, { useDidShow } from '@tarojs/taro'
import style from './style.less'
import star1 from '../../resource/star1.png'
import star2 from '../../resource/star2.png'
import star3 from '../../resource/star3.png'
import star4 from '../../resource/star4.png'
import have from '../../resource/have.png'
import used from '../../resource/used.png'
import table1 from '../../resource/table1.png'
import table2 from '../../resource/table2.png'
import { OpenData } from "@tarojs/components"

const Member: FC = () => {
  const [select, setSelect] = useState(1)

  const [member, setMember] = useState<any>({ membershipType: '00', coupons: [{}, {}] })

  useDidShow(() => {
    Taro.showLoading({ title: '加载中' })
    Taro.request({
      url: 'http://10.190.84.29:9527/fta-usercenter/membership/shipperImmediateRenewShow',
      method: 'POST',
      data: JSON.stringify({
        token: Taro.getStorageSync('token'),
      }),
      success: (data) => {
        console.log('获取会员信息', data);
        setMember(data.data.data)
        Taro.hideLoading()
      },
      fail: () => {
        Taro.hideLoading()
        console.log('请求会员失败');
      }
    })
  })

  return (
    <div className={style.root}>
      <div className="header">
        <div className="user-info">
          <div className="img">
            <OpenData type="userAvatarUrl" />
          </div>
          <div className="login">
            <OpenData type="userNickName" />
          </div>
          {member.membershipType[0] === '0' && member.membershipType[1] === '0' && <div className="desc">暂未开通会员</div>}
          <div className="desc">
            {member.membershipType[0] === '1' && <div>会员</div>}
            {member.membershipType[1] === '1' && <div>冷链</div>}
          </div>
        </div>
      </div>
      <div className="body" style={{ height: select === 1 ? member.membershipType[0] === '1' ? Taro.pxTransform(1262) : Taro.pxTransform(2162) : Taro.pxTransform(1036) }}>
        <div className="title">
          <div className="container1">
            <div style={{ color: select === 1 ? "#101010" : "#9F9F9F" }} onClick={() => { setSelect(1) }}>尊享会员</div>
            <div style={{ color: select === 2 ? "#101010" : "#9F9F9F" }} onClick={() => { setSelect(2) }}>冷链权益</div>
          </div>
          <div className="container2">
            <div style={{ visibility: select === 1 ? "visible" : "hidden" }} onClick={() => { setSelect(1) }} />
            <div style={{ visibility: select === 2 ? "visible" : "hidden" }} onClick={() => { setSelect(2) }} />
          </div>
        </div>
        {select === 1 ? <>
          <div className="vip-card">
            <div>会员季卡</div>
            {member.membershipType[0] === '1' ? <div style={{ color: '#949090' }}>{member.normalEndTime} 到期</div> : <div>开通后可享3个月会员权限</div>}
            <div>¥ 398</div>
            {member.membershipType[0] === '1' ? <div className="btn" onClick={() => { Taro.navigateTo({ url: '/packageD/pay/index?status=2&renew=1&amount=398' }) }}>立即续费</div> :
              <div className="btn" onClick={() => { Taro.navigateTo({ url: '/packageD/pay/index?status=2&renew=0&amount=398' }) }}>立即开通</div>}
          </div>
          <div className="title1">超级特权</div>
          {
            member.membershipType[0] === '1' ? (
              <div className="deliver">
                <div>发货次数</div>
                <div>剩余发货次数： {member.sendCargoTimes}</div>
                <img src="https://ymm-maliang.oss-cn-hangzhou.aliyuncs.com/ymm-maliang/access/ymm_1636028379668.png?x-oss-process=image/resize,w_300" alt="" />
              </div>) : (
              <div className="starContainer">
                <div className="starItem">
                  <img src={star1} alt="" />
                  <div>畅享发货</div>
                  <div>每季额外赠送398次</div>
                </div>
                <div className="starItem">
                  <img src={star2} alt="" />
                  <div>优享折扣券</div>
                  <div>会员专属折扣券</div>
                </div>
                <div className="starItem">
                  <img src={star3} alt="" />
                  <div>生日礼包</div>
                  <div>陪你成长生日快乐</div>
                </div>
                <div className="starItem">
                  <img src={star4} alt="" />
                  <div>年度礼盒</div>
                  <div>年度纪念实体礼盒</div>
                </div>
              </div>
            )
          }
          <div className="title2">优享折扣券<i style={{ display: member.membershipType[0] === '1' ? 'inline' : 'none' }}>当月已发货 {member.monthDeliverys} 次，成交率为 {member.monthRate}%</i></div>
          {
            member.membershipType[0] === '1' ? (
              <div className="boxContainer">
                <div className="boxItem">
                  <div className="boxDiscount">95折</div>
                  <div className="boxName">折扣券</div>
                  <div className="boxDesc">仅限抵运费，最高抵200元</div>
                  <img style={{ display: member.coupons[0].couponId === null ? 'block' : 'none' }} src={member.coupons[0].isValid ? have : used} alt="" />
                  {member.coupons[0].couponId === null ? member.coupons[0].isValid ? <div className="boxTips">有效期：{member.coupons[0].beginTime.substr(0, 10)}至{member.coupons[0].endTime.substr(0, 10)}</div> :
                    <div className="boxTips">已使用</div> :
                    <div className="boxTips">获得此券需发货5次，且成交率为40%</div>
                  }
                </div>
                <div className="boxItem">
                  <div className="boxDiscount">85折</div>
                  <div className="boxName">折扣券</div>
                  <div className="boxDesc">仅限抵运费，最高抵200元</div>
                  <img style={{ display: member.coupons[1].couponId === null ? 'block' : 'none' }} src={member.coupons[1].isValid ? have : used} alt="" />
                  {member.coupons[1].couponId === null ? member.coupons[1].isValid ? <div className="boxTips">有效期：{member.coupons[1].beginTime.substr(0, 10)}至{member.coupons[1].endTime.substr(0, 10)}</div> :
                    <div className="boxTips">已使用</div> :
                    <div className="boxTips">获得此券需发货10次，且成交率为60%</div>
                  }
                </div>
              </div>
            ) : (
              <>
                <div className="section"><i>开通会员前</i>：如果您的运费接近市场价格、取消发货次数少，将会提高您的成交率。自您认证后，当一个月内的发货量在<i>10次及以上</i>，且发货成交率达到<i>40%</i>时，我们将会给您赠送运费折扣券。折扣券有效期为一个月。</div>
                <img className="image" src={table1} alt="" />
                <div className="tip">此折扣券<i>最高可抵扣200元</i>。</div>
                <div className="tips">此折扣券在您支付运费时直接抵扣运费。</div>
                <div className="line" />
                <div className="section"><i>开通会员后</i>：如果您的运费接近市场价格、取消发货次数少，将会提高您的成交率。自您开通会员当日起，当一个月内的发货量在<i>5次及以上</i>，且发货成交率达到<i>40%</i>时，我们将会给您赠送运费折扣券。折扣券有效期为一个月。</div>
                <img className="image" src={table2} alt="" />
                <div className="tip">此折扣券<i>最高可抵扣200元</i>。</div>
                <div className="tips">此折扣券在您支付运费时直接抵扣运费。</div>
              </>
            )
          }
          {member.membershipType[0] === '1' ? <div className="btn" onClick={() => { Taro.navigateTo({ url: '/packageD/pay/index?status=2&renew=1&amount=398' }) }}>立即续费</div> :
            <div className="btn" onClick={() => { Taro.navigateTo({ url: '/packageD/pay/index?status=2&renew=0&amount=398' }) }}>立即开通</div>
          }
        </> : <>
          <div className="vip-card">
            <div>冷链季卡</div>
            {member.membershipType[1] === '1' ? <div style={{ color: '#949090' }}>{member.coldEndTime} 到期</div> : <div>开通后可享3个月冷链权益</div>}
            <div>¥ 198</div>
            {member.membershipType[1] === '1' ? <div className="btn" onClick={() => { Taro.navigateTo({ url: '/packageD/pay/index?status=1&renew=1&amount=198' }) }}>立即续费</div> :
              <div className="btn" onClick={() => { Taro.navigateTo({ url: '/packageD/pay/index?status=1&renew=0&amount=198' }) }}>立即开通</div>}
          </div>
          <div className="title1">超级特权</div>
          <div className="section2">您购买该权益后，我们将为您提供系统链接，本系统数字化记录了监测车辆车厢内的温湿度数据，并进行可视化展示。</div>
          <div className="section2">您登陆系统后，可查看监测车辆车厢内温湿度的实时数据，便于监控和查询。</div>
          <div className="title1">说明</div>
          <div className="section2">您购买该权益后，当您发货的需求车辆为<i>“冷藏车”</i>时，系统会优先推荐安装本设备的车辆接单，确保货与车的数据匹配。</div>
          <div style={{ height: Taro.pxTransform(20) }} />
          {member.membershipType[1] === '1' ? <div className="btn" onClick={() => { Taro.navigateTo({ url: '/packageD/pay/index?status=1&renew=1&amount=198' }) }}>立即续费</div> :
            <div className="btn" onClick={() => { Taro.navigateTo({ url: '/packageD/pay/index?status=1&renew=0&amount=198' }) }}>立即开通</div>
          }

        </>}
      </div>
    </div>
  )
}

export default Member